<template>
      <el-header style="width: 100%">
        <div class="nav-list">
          <navigation />
        </div>
      </el-header>
      <div style="display: flex; justify-content: center; align-items: flex-start; height: 100vh;">
        <div :style="{ transform: `scale(${scale})`, transition: 'transform 0.3s', transformOrigin: 'top center' }">
      <el-container style="height: calc(100vh - 60px);">
        <!-- 左侧影视内容展示区域 -->
        <el-main>
          <h4 style="height: 10px; margin-left: 20px; color: orangered;" @click="goToRecommendedPage"><el-icon><ArrowLeftBold /></el-icon>返回片单</h4><br />
          <h1 style="margin-top: -45px; margin-left: 176px;">{{ titles }}</h1>

          <el-button style="height: -10px; margin-left: 176px; color: inherit;" type="info" round>{{ classify }}</el-button>
          <div v-for="(movie, index) in RecommendedList" :key="index" class="movie-card" :id="'movie-' + index">
            <div>
              <h1><a style="color: orangered">#</a> {{ movie.name }}</h1>
              <img :src="movie.imgone" alt="movie.name" class="movie-imageone" />
              <img :src="movie.imgtwo" alt="movie.name" class="movie-imagetwo" />
            </div>
            <div>
              <div class="card-m3">
                <p>{{ movie.mark }}</p>
                <span>{{ movie.evaluate }} <a :href="movie.source">-></a></span>
                <img :src="movie.imgthere" alt="movie.name" class="movie-imagethere" />
              </div>
              <span>{{ movie.tag }}</span><br />
              <span>{{ movie.director }}</span><br />
              <span>{{ movie.actors }}</span>
            </div>
          </div>
          <div class="zoom-controls">
            <el-button @click="zoomIn">放大</el-button>
            <el-button @click="zoomOut">缩小</el-button>
          </div>
        </el-main>

        <!-- 右侧导航区域 -->
        <el-aside width="150px" class="nav-aside">
          <p>内容导航</p>
          <el-scrollbar style="height: 80%;">
            <el-menu :default-active="activeMenu" @select="handleMenuSelect">
              <el-menu-item v-for="(movie, index) in RecommendedList" :key="index" :index="index.toString()" @click="scrollToMovie(index)">
                {{ movie.name }}
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import Navigation from '@/components/navigation.vue';
import { ref } from 'vue';
import request from '@/utils/request';
import { useRouter } from 'vue-router';
// import { useRoute } from 'vue-router';
import { onMounted } from 'vue';
const activeMenu = ref("0");
const RecommendedList = ref([]);
const titles = ref('');
const classify = ref('');
const scale = ref(1); // 缩放级别状态
const router = useRouter();
// const route = useRoute();
const title=ref('');
const Recommended = async () => {
  const res = await request.get('/recommended/findAll', { params: { title: title.value } });
  RecommendedList.value = res.data.data;
  titles.value = RecommendedList.value[0].title;
  classify.value = RecommendedList.value[0].classify;
};



const goToRecommendedPage = () => {
  router.push('/sheet'); // 直接使用路径
};

const scrollToMovie = (index) => {
  const movieElement = document.getElementById(`movie-${index}`);
  if (movieElement) {
    movieElement.scrollIntoView({ behavior: 'smooth' });
  }
};

const zoomIn = () => {
  scale.value += 0.1; // 增加缩放比例
};

const zoomOut = () => {
  scale.value = Math.max(0.1, scale.value - 0.1); // 减少缩放比例，但确保不低于0.1
};



onMounted(() => {
  const savedTitle = localStorage.getItem('title'); // 从 localStorage 获取 title
  if (savedTitle) {
    title.value = savedTitle; // 如果存在，设置为当前的 title
  }
  Recommended();
});

</script>

<style scoped>
.nav-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  list-style: none;
  background-color: black;
  z-index: 1000;
}
.movie-card {
  margin-bottom: 20px;
  width: 790px;
  height: auto;
  margin-left: 180px;
  border: none;
}
.movie-card span {
  font-family: 'Arial', sans-serif;
  opacity: 0.7; 
}
.card-m3 {
  display: flex;
  margin-bottom: -10px;
}
.card-m3 p {
  font-size: 35px;
  font-weight: bold;
}
.card-m3 span {
  font-size: 12px;
  margin-top: 40px;
  margin-left: 30px;
}
.movie-imageone {
  width: 219px;
  height: 305px;
}
.movie-imagetwo {
  width: 497px;
  height: 305px;
  margin-left: 30px;
}
.movie-imagethere {
  width: 95px;
  height: 25.2px;
  margin-left: 420px;
  margin-top: 40px;
}
.nav-aside {
  font-size: 12px;
}
.el-menu-item {
  cursor: pointer;
}
.zoom-controls {
  margin-top: 20px;
  text-align: center;
}
</style>
